<template>
    <div>
        <div v-for="(item,index) in dd" :key="index" class="love">
            <div><img :src="item.pic_small" alt=""></div>
            <div>
                <p>{{item.title}}</p>
                <p>{{item.author}}</p>
            </div>
        </div>
    </div>
</template>

<script>
    import {getSongDetail} from "../api/InterFacelibrary";

    export default {
        name: "Mine.vue",
        data(){
            return {
                songDetail:[],
                main:[],
                songLoveList:[],
                dd:[]
            }
        },
        created() {
            this.songLoveList= JSON.parse(localStorage.getItem("name")) || []
            // console.log(this.songLoveList)
            for(const item of this.songLoveList){
                // console.log(item)
                getSongDetail(item).then(res => {
                    console.log(res)
                    this.dd.push(res.songinfo)
                    console.log(this.dd)

                });
            }


        }
    }
</script>

<style scoped lang="less">
.love {
    display: flex;
    margin-bottom: 10px;
    padding: 0px 15px;
    justify-content: space-around;
    align-items: center;
    img {
        width: 60px;
        height: 60px;
    }
    div:nth-child(2) {
        width: calc(100% - 60px);
        p {
            margin-left: 20px;
        }
    }
}
</style>